<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link href="/static/element-ui/theme-chalk/index.css" rel="stylesheet">
  <style>
     .container{position: absolute;background: #f3f3f3;padding: 0;margin: 0;overflow: hidden;top: 0;left: 0;right: 0;bottom: 0;}
    .el-tabs__header{position: fixed;width: 150px;background: #3c3c3c;}
    .el-tabs__content{position: absolute;right: 0;left: 149px;bottom: 0;top: 0;overflow: hidden;}
    .el-table--fit{position: absolute;left: 30px;right: 30px !important;bottom: 30px;border: 1px solid #efefef;top: 100px;overflow-y: auto;width: inherit;}
    .el-tab-pane{background: #fff;padding: 30px;position: absolute;top: 20px;bottom: 20px;left: 20px;right: 20px;border-radius: 6px;}
    .el-tabs--left .el-tabs__item.is-left{text-align: center;}
    .el-tabs__item.is-active{color: #ffffff;background: #44a1e6;}
    .el-tabs__item{color: #c3c3c3;}
    .el-table__header-wrapper{position: fixed;top: 121px;z-index: 1000;width: inherit;}
    .el-table__body-wrapper{top: 48px;}
    ::-webkit-scrollbar{width: 6px;height: 4px;}
    ::-webkit-scrollbar-thumb{border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: rgba(0, 0, 0, 0.2);}
    ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 0;background: rgba(0, 0, 0, 0.1);}
    .el-form-item__content{max-width: 600px;}
    .demo-ruleForm{max-width: 600px;margin: 100px auto;}
    .el-select{width:100%;}
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <el-tabs tab-position="left" @tab-click="getData">
        <el-tab-pane label="项目总览">
          <el-table :data="data0.tasks" v-loading="loading0" border>
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="project" label="项目名称"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column prop="count" label="计数"></el-table-column>
            <el-table-column prop="updated" label="更新时间"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope" v-if="scope.row.project=='儿童对话'">
                <a class="el-button el-button--primary" href="/data/project/download" style="text-decoration:none">下载</a>
                <el-upload
                  action="/data/project/upload"
                  :show-file-list="false"
                  :on-success="handleUploadSuccess"
                  :on-error="handleUploadError"
                  style="display:inline-block">
                  <el-button type="danger">点击上传</el-button>
                </el-upload>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="提交句子">
          <el-form ref="form1" :model="form1" :inline="true">
            <el-form-item>
              <el-date-picker v-model="form1.date" type="date" id="form1" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getCommitData">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="data1" v-loading="loading1" border>
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="project" label="项目名称"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="count" label="计数"></el-table-column>
            <el-table-column prop="updated" label="更新时间"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="审核统计">
          <el-form ref="form2" :model="form2" :inline="true">
            <el-form-item>
              <el-date-picker v-model="form2.date" type="date" id="form2" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getReviewData">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="data2" v-loading="loading2" border>
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="project" label="项目名称"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="count" label="计数"></el-table-column>
            <el-table-column prop="updated" label="更新时间"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="添加账户">
          <el-form :model="form3" :rules="rules" ref="form3" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form3.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form3.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addAccount('form3')">添加</el-button>
              <el-button @click="resetAccount('form3')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="查询账户">
          <el-form ref="form4" :model="form4" :inline="true">
            <el-form-item>
              <el-input v-model="form4.username" placeholder="输入用户名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchUserName">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="data4" v-loading="loading4" border>
            <el-table-column type="index" width="100"></el-table-column>
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column prop="role" label="角色"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="修改密码">
          <el-form :model="form5" :rules="rules" ref="form5" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form5.username"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
              <el-input v-model="form5.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="alterPwd('form5')">修改</el-button>
              <el-button @click="resetPwd('form5')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="添加权限">
          <el-form :model="form6" ref="form6" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form6.username"></el-input>
            </el-form-item>
            <el-form-item label="项目" prop="project">
              <el-select v-model="form6.project" clearable placeholder="请选择">
                <el-option
                  v-for="value in form6.projectval"
                  :key="value"
                  :label="value"
                  :value="value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="权限" prop="role">
              <el-select v-model="form6.role" clearable placeholder="请选择">
                <el-option
                  v-for="value in form6.roleval"
                  :key="value"
                  :label="value"
                  :value="value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addRights('form6')">添加</el-button>
              <el-button @click="resetRights('form6')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="查询权限">
          <el-form ref="form7" :model="form7" :inline="true">
            <el-form-item>
              <el-input v-model="form7.username" placeholder="输入用户名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchRight">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="data7" v-loading="loading7" border>
            <el-table-column type="index" width="100"></el-table-column>
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="project" label="项目"></el-table-column>
            <el-table-column prop="role" label="角色"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="修改权限">
          <el-form :model="form8" :rules="rules" ref="form8" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form8.username"></el-input>
            </el-form-item>
            <el-form-item label="项目" prop="project">
              <el-select v-model="form8.project" clearable placeholder="请选择">
                <el-option
                  v-for="value in form8.projectval"
                  :key="value"
                  :label="value"
                  :value="value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="权限" prop="role">
              <el-select v-model="form8.role" clearable placeholder="请选择">
                <el-option
                  v-for="value in form8.roleval"
                  :key="value"
                  :label="value"
                  :value="value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="alterRightss('form8')">修改</el-button>
              <el-button @click="resetRightss('form8')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</body>
  <!-- 先引入 Vue -->
  <script src="/static/vue/vue.min.js"></script>
  <!-- 引入组件库 -->
  <script src="/static/element-ui/index.js"></script>
  <!-- 引入axios异步通信库 -->
  <script src="/static/axios/axios.min.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          loading0: false,
          data0: [],
          loading1: false,
          data1: [],
          form1: {
            date: new Date(new Date().toDateString())
          },
          loading2: false,
          data2: [],
          form2: {
            date: new Date(new Date().toDateString())
          },
          form3: {
            username: '',
            password: ''
          },
          rules: {
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' }
            ]
          },
          loading4: false,
          form4: {
            username: ''
          },
          data4: [],
          form5: {
            username: '',
            password: ''
          },
          form6: {
            username: '',
            project: '',
            roleval: ['普通用户','审核用户','管理员'],
            role:'',
            project:'',
            projectval: ['儿童对话','成人对话','成人对话2','成人对话3'],
          },
          form7: {
            username: '',
          },
          loading7: false,
          data7: [],
          form8: {
            username: '',
            project: '',
            role: '',
            roleval: ['普通用户','审核用户','管理员'],
            projectval: ['儿童对话','成人对话','成人对话2','成人对话3'],
          }
        }
      },
      mounted: function () {
        this.$nextTick(function () {
          // 代码保证 this.$el 在 document 中
          vm.getProjectData()
        })
      },
      methods: {
        getProjectData() {
          vm.loading0 = true;
          axios.get('/data/project')
          .then(function (response) {
            rsp = response.data;
            vm.data0 = rsp;
            vm.loading0 = false;
          })
          .catch(function (error) {
              vm.loading0 = false;
          });
        },
        getCommitData() {
          vm.loading1 = true;
          var date = Date.parse(vm.form1.date)/1000
          axios.get('/data/commit?date='+ date)
          .then(function (response) {
              rsp = response.data;
              vm.data1 = rsp;
              vm.loading1 = false;
          })
          .catch(function (error) {
              vm.loading1 = false;
          });
        },
        getReviewData() {
          vm.loading2 = true;
          var date = Date.parse(vm.form1.date)/1000
          axios.get('/data/review?date='+ date)
          .then(function (response) {
              rsp = response.data;
              vm.data2 = rsp;
              vm.loading2 = false;
          })
          .catch(function (error) {
              vm.loading2 = false;
          });
        },
        getData(tab) {
          if(tab.label === "项目总览") {
            vm.getProjectData()
          } else if (tab.label === '提交句子') {
            vm.getCommitData()
          } else if (tab.label === '审核句子') {
            vm.getReviewData()
          }
        },
        addAccount(form3) {
          let vm = this
          this.$refs[form3].validate((valid) => {
            if (valid) {
              axios.post('/api/user',
                {
                  username: vm.form3.username,
                  password: vm.form3.password
                }
              )
              .then(function (response) {
                let rsp = response.data.code
                let mess = response.data.message
                if(rsp === 0){
                  vm.$message.success({
                    type: 'success',
                    message: mess
                  })
                  vm.resetAccount(form3)
                }else{
                  vm.$message.error(mess);
                  vm.resetAccount(form3)
                }
              })
              .catch(function (error) {
                vm.$message.error(error);
              })
            } else {
              vm.$message.error('失败');
              return false
            }
          })
        },
        resetAccount(form3) {
          this.$refs[form3].resetFields()
        },
        searchUserName() {
          let vm = this
          axios.get('/api/user/'+vm.form4.username)
          .then(function (response) {
            let rsp = response.data.data
            let mess = response.data.message
            if(rsp.length === 0){
              vm.data4 = '';
              vm.$message.error(mess);
            }else{
              vm.$message.success({
                type: 'success',
                message: mess
              })
              vm.data4 = rsp;
              vm.loading4 = false;
            }
          })
          .catch(function (error) {
            vm.$message.error(error);
            vm.loading4 = false;
          });
        },
        alterPwd(form5) {
          let vm = this
          this.$refs[form5].validate((valid) => {
            if (valid) {
              axios.post('/api/user/'+vm.form5.username+'/password',
                {
                  username: vm.form5.username,
                  password: vm.form5.password
                }
              )
              .then(function (response) {
                let rsp = response.data.code
                let mess = response.data.message
                if(rsp === 0){
                  vm.$message.success({
                    type: 'success',
                    message: mess
                  })
                  vm.resetAccount(form5)
                }else{
                  vm.$message.error(mess);
                  vm.resetAccount(form5)
                }
              })
              .catch(function (error) {
                vm.$message.error(error);
              })
            } else {
              vm.$message.error('失败');
              return false
            }
          })
        },
        resetPwd(form5) {
          this.$refs[form5].resetFields()
        },
        addRights(form6) {
          let vm = this
          this.$refs[form6].validate((valid) => {
            if (valid) {
              axios.post('/api/user/rights',
                {
                  username: vm.form6.username,
                  project: vm.form6.project,
                  role: vm.form6.role
                }
              )
              .then(function (response) {
                let rsp = response.data.code
                let mess = response.data.message
                if(rsp === 0){
                  vm.$message.success({
                    type: 'success',
                    message: mess
                  })
                  vm.resetAccount(form6)
                }else{
                  vm.$message.error(mess);
                  vm.resetAccount(form6)
                }
              })
              .catch(function (error) {
                vm.$message.error(error);
              })
            } else {
              vm.$message.error('失败');
              return false
            }
          })
        },
        resetRights(form6) {
          this.$refs[form6].resetFields()
        },
        searchRight() {
          axios.get('/api/user/'+vm.form7.username+'/rights')
          .then(function (response) {
            let rsp = response.data.data
            let mess = response.data.message
            if(rsp.length === 0){
              vm.data7 = '';
              vm.$message.error(mess);
            }else{
              vm.$message.success({
                type: 'success',
                message: mess
              })
              vm.data7 = rsp;
              vm.loading7 = false;
            }
          })
          .catch(function (error) {
            vm.$message.error(error);
            vm.loading7 = false;
          });
        },
        alterRightss(form8) {
          let vm = this
          this.$refs[form8].validate((valid) => {
            if (valid) {
              axios.post('/api/user/'+vm.form8.username+'/rights',
                {
                  username: vm.form8.username,
                  project: vm.form8.project,
                  role: vm.form8.role
                }
              )
              .then(function (response) {
                let rsp = response.data.code
                let mess = response.data.message
                if(rsp === 0){
                  vm.$message.success({
                    type: 'success',
                    message: mess
                  })
                  vm.resetAccount(form8)
                }else{
                  vm.$message.error(mess);
                  vm.resetAccount(form8)
                }
              })
              .catch(function (error) {
                vm.$message.error(error);
              })
            } else {
              this.$message.error('失败');
              return false
            }
          })
        },
        resetRightss(form8) {
          this.$refs[form8].resetFields()
        },
        handleDownload(project) {
          console.log(project)
          var instance = axios.create({
            responseType: 'stream'
          })
          instance.get('/data/project/download', {
            project: project
          })
          .then(function (response) {
            console.log(response.data)
            let blob = new Blob([response.data], { type: 'text/csv' }) // 假设文件为pdf
            let link = document.createElement('a')
            link.href = URL.createObjectURL(blob)
            link.download = "hehe.csv"
            link.click()
            link.remove()
          })
          .catch(function (error) {
            vm.$message.error(error);
            vm.loading7 = false;
          });
        },
        handleUploadSuccess(response) {
          this.$alert(response, '成功', {
            confirmButtonText: '确定',
            type: 'success',
            callback: action => {
              window.location.reload()
            }
          });
        },
        handleUploadError(err) {
          this.$alert(err.message, '失败', {
            confirmButtonText: '确定',
            type: 'error',
            callback: action => {
              window.location.reload()
            }
          });
        }
      },
    })
  </script>
</html>